<template>
  <!-- 动态详情卡片 -->
  <div class="notes-card" @mouseenter="bgImage" @mouseleave="resetBgImage">
    <!-- 左侧区域 -->
    <div
      v-if="notesInfo.coverUrl"
      class="left"
      ref="leftRef"
      :style="{ backgroundImage: `url(${notesInfo.coverUrl})` }"
    ></div>

    <!-- 右侧区域 -->
    <div class="right">
      <div class="head">
        <div class="title">{{ notesInfo.title.slice(0, 17) }}...</div>
        <div class="label" v-for="item in notesInfo.tags || []" :key="item.id">
          <img
            src="https://vue-wj.oss-cn-beijing.aliyuncs.com/icon/%E6%A0%87%E7%AD%BE_1.png"
          />
          <p>{{ item.name }}</p>
        </div>
      </div>
      <div class="body">
        <span>{{ previewText }}</span
        >...
      </div>
      <div class="footer">
        <div class="icon">
          <img
            src="https://vue-wj.oss-cn-beijing.aliyuncs.com/icon/%E5%96%9C%E6%AC%A2.png"
          />
          <p>{{ notesInfo.likeCount }}</p>
        </div>
        <div class="icon">
          <img
            src="https://vue-wj.oss-cn-beijing.aliyuncs.com/icon/%E7%95%99%E8%A8%80.png"
          />
          <p>{{ notesInfo.commentCount }}</p>
        </div>
        <div class="icon">
          <img
            src="https://vue-wj.oss-cn-beijing.aliyuncs.com/icon/%E8%89%B2%E5%9D%97%EF%BC%8D%E6%96%87%E6%9C%AC%E6%9F%A5%E7%9C%8B.png"
          />
          <p>{{ notesInfo.viewCount }}</p>
        </div>
        <div class="icon">
          <img
            src="https://vue-wj.oss-cn-beijing.aliyuncs.com/icon/%E6%97%A5%E5%8E%86.png"
          />
          <p>{{ notesInfo.createTime }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";

const props = defineProps({
  notesInfo: {
    type: Object,
  },
});

// 计算预览文本
const previewText = computed(() => {
  // 移除 Markdown 语法标记
  const plainText = props.notesInfo.content
    .replace(/<pre><code.*?>(.*?)<\/code><\/pre>/gs, "")
    .replace(/<[^>]*>/g, "")
    .replace(/&nbsp;/g, "")
    .trim();

  // 截取前200个字符
  return plainText.slice(0, 114) + "...";
});

const leftRef = ref();
const bgImage = () => {
  leftRef.value.style.opacity = 1;
};
const resetBgImage = () => {
  leftRef.value.style.opacity = 0.5;
};

// const like = computed(() => props.notesInfo.likes)
</script>

<style lang="scss" scoped>
.notes-card {
  margin: 0 auto;
  margin-bottom: 24px;
  width: 100%;
  min-height: 180px;
  display: flex;
  border-radius: 12px;
  background: rgb(255, 255, 255, 0.7);
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.03);
  cursor: pointer;
  transition: all 0.3s;

  @media (max-width: 768px) {
    flex-direction: column;
    padding: 8px;
    .left {
      width: 100% !important;
      height: 20vh;
      border-radius: 12px !important;
    }
    .right {
      width: 100%;
      padding: 10px;
      .head {
        width: 250px;
        margin-bottom: 50px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        min-height: auto;
        padding: 8px;
        .title {
          font-size: 16px;
          margin-right: 0;
          width: 100%;
        }
        .label {
          margin-right: 8px;
          img {
            width: 18px;
            height: 18px;
          }
          p {
            font-size: 12px;
          }
        }
      }
      .body {
        width: 270px;
        min-height: 80px;
        padding: 0 8px;
        font-size: 14px;
      }
      .footer {
        margin-left: 18vw;
        width: 230px;
        display: flex !important;
        justify-content: space-between;
        flex-wrap: wrap;
        min-height: 60px;
        padding: 8px !important;
        gap: 10px;
        .icon {
          margin-right: 0px;
          img {
            width: 15px;
            height: 15px;
          }
          p {
            font-size: 12px;
          }
        }
      }
    }
  }

  &:hover {
    transform: scale(1.05);
    border: 0.5px solid #91e2f3c0;
    box-shadow: 2px 2px 10px rgba(193, 226, 243, 0.7);
  }
  // 左侧区域
  .left {
    width: 40%;
    flex-basis: auto;
    background-size: cover;
    border-radius: 12px 0px 0px 12px;
    overflow: hidden;
    opacity: 0.5;
    transition: all 0.3s;
  }

  // 右侧区域
  .right {
    flex-basis: auto;
    width: 60%;
    padding: 15px 10px;

    .head {
      height: 36px;
      padding: 0px 10px;
      display: flex;
      gap: 5px;
      align-items: center;

      .title {
        font-size: 18px;
        font-weight: 600;
      }

      .label {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-right: 3px;

        img {
          width: 24px;
          height: 24px;
        }

        p {
          font-size: 13px;
        }
      }
    }

    .body {
      min-height: 100px;
      text-indent: 2em;
      line-height: 1.5;
      color: rgba(51, 50, 50, 0.7);
    }

    .footer {
      height: 38px;
      display: flex;
      padding: 10px 0;

      .icon {
        height: 24px;
        line-height: 24px;
        margin-right: 10px;
        display: flex;
        gap: 5px;

        img {
          width: 24px;
          height: 24px;
          transition: all 0.3s;

          &:hover {
            transform: scale(1.2);
          }
        }

        p {
          font-size: 13px;
          color: gray;
        }

        &:last-child {
          margin-left: 30px;
        }
      }
    }
  }
}
</style>